<!DOCType html>
<html>
<head>
    <link href="/favicon.ico" rel="icon" type="image/x-icon" />
    <meta charset="utf-8">
    <title>h265webjs - https://github.com/numberwolf/h265web.js</title>
    <meta charset="utf-8" name="author" content="ChangYanlong">
    <meta charset="utf-8" name="email" content="porschegt23@foxmail.com">
    <meta charset="utf-8" name="discord" content="numberwolf#8694">
    <meta charset="utf-8" name="github" content="https://github.com/numberwolf/h265web.js">
    <script src='dist/dist-play.js'></script>
    <style>
        body {
            background-color: #eeeeee;
        }
        #coverLayer {
            width: 100%;
            height: 100%;
            padding-top: 300px;
            z-index: 10000;
            position: absolute;
            top: 0px;
            left: 0px;
            background-color: rgba(0, 0, 0, 0.5);
        }
        #coverLayerBtn {
            width: 20%;
            height: 200px;
            border-radius: 50px;
        }
        #controller {
            background-color: black;
            width: 960px;
            height: 75px;
        }
        .cachePts {
            width: 100%;
            margin-top:0.125rem;
            border:none;
            color:#e9e9e9;
            -moz-border-radius:1px;
            -webkit-border-radius:1px;
            border-radius:1px;
        }
        .cachePts::-moz-progress-bar {
            background-color:#e9e9e9;
        }
        .cachePts::-webkit-progress-value {
            background-color:#e9e9e9;
        }
        #progressPts {
            width: 100%;
            margin-top:0.125rem;
            border:none;
            color:yellow;
            -moz-border-radius:1px;
            -webkit-border-radius:1px;
            border-radius:1px;
        }
        #progressPts::-moz-progress-bar {
            background-color:yellow;
        }

        #progressPts::-webkit-progress-value {
            background-color:yellow;
        }
        #playBtn {
            float: left;
            width: 4%;
            margin-top: 3px;
            margin-bottom: 3px;
            margin-left: 5px;
            color: white;
            /*background: rgb(0, 0, 0);*/
            background-color: rgb(0, 0, 0);
            border: 2px solid white;
            text-align: center;
            line-height: 20px;
            font-weight: bold;
            border-radius: 7px;
        }
        #showLabel {
            color: white;
            background: rgb(0, 0, 0);
            border: 1px solid white;
            border-radius: 7px;
            padding: 1px;
            float: right;
            margin-top: 3px;
            margin-right: 5px;
        }
        #ptsLabel {
            color: white;
            background: rgb(0, 0, 0);
            border: 1px solid white;
            float: right;
            border-radius: 7px;
            padding: 1px;
            margin-top: 3px;
            margin-right: 5px;
        }
        #fullScreenBtn {
            float: right;
            margin-top: 3px;
            margin-right: 5px;
            color: white;
            background: rgb(0, 0, 0);
            border: 2px solid white;
            text-align: center;
            line-height: 20px;
            font-weight: bold;
            border-radius: 7px;
        }
        .voice-div {
            color: white;
            background: rgb(0, 0, 0);
            border: 2px solid white;
            border-radius: 7px;
            padding-left: 20px;
            width: 18%;
            float: right;
            margin-top: 3px;
            margin-right: 5px;
        }
        .voice-div > span {
            float: left;
            color: white;
            margin-right: 5px;
        }
        #progressVoice {
            float: left;
            width: 50%;
            margin-top:0.125rem;
            border:none;
            color:yellow;
            -moz-border-radius:1px;
            -webkit-border-radius:1px;
            border-radius:1px;
        }
        #progressVoice::-moz-progress-bar {
            background-color:yellow;
        }

        #progressVoice::-webkit-progress-value {
            background-color:yellow;
        }
    </style>
</head>
<body>

    <div id="coverLayer" hidden="hidden">
        <center>
            <button id="coverLayerBtn"><font size="100px">PLAY</font></button>
        </center>
    </div>

    <h1> h265web.js demo </h1>
    <div id="glplayer"></div>
    <div id="controller">
        <progress id="cachePts" class="cachePts" value="0" max="100"></progress>
        <progress id="progressPts" value="0" max="100"></progress>
        <button id="playBtn">
            >
        </button>
        <span id="ptsLabel">0:0:0/0:0:0</span>
        <button id="fullScreenBtn">[Full Screen]</button>
        <span id="showLabel"></span>
        <div class="voice-div">
            <span>Volume</span>
            <progress id="progressVoice" value="100" max="100"></progress>
        </div>
    </div>

    <br>
    <table>
        <tr style="color:red;"> 
            <td>h265web.js</td>
            <td>mpeg-demuxer.js</td>
        </tr>
        <tr> 
            <td><img src="https://badge.fury.io/js/h265web.js.svg"></td>
            <td><img src="https://badge.fury.io/js/mpeg.js.svg"></td>
        </tr>
    </table>

    <br>
    <a href="https://github.com/numberwolf/h265web.js">
        <font color="blue">https://github.com/numberwolf/h265web.js</font>
    </a>
    <br>
    <a href="http://xvideo.video">
        <font color="blue">http://xvideo.video</font>
    </a>
    <br>
    <a href="mailto:porschegt23@foxmail.com">
        <font color="blue">porschegt23@foxmail.com</font>
    </a>

    <script>
        //var token = "============>>>>>>>>>>>>>>Author:changyanlong|numberwolf,Github:https://github.com/numberwolf,Email:porschegt23@foxmail.com,QQ:531365872,HomePage:http://xvideo.video,Discord:numberwolf#8694,Beijing,WorkIn:Baidu<<<<<<<<<<<<===========";
        var token = "base64:QXV0aG9yOmNoYW5neWFubG9uZ3xudW1iZXJ3b2xmLEdpdGh1YjpodHRwczovL2dpdGh1Yi5jb20vbnVtYmVyd29sZixFbWFpbDpwb3JzY2hlZ3QyM0Bmb3htYWlsLmNvbSxRUTo1MzEzNjU4NzIsSG9tZVBhZ2U6aHR0cDovL3h2aWRlby52aWRlbyxEaXNjb3JkOm51bWJlcndvbGYjODY5NCx3ZWNoYXI6bnVtYmVyd29sZjExLEJlaWppbmcsV29ya0luOkJhaWR1";
        var type = "mp4";
        var url = "res/video40_265_moov.mp4";
        // var url = "res/hevc_issue_58.mp4";
        // var url = "res/speed_moov.mp4";
        // var url = "res/no_formattag_265.mp4";
        // var url = "res/06hY38_64_yuvj420p.mp4";
        // var url = "res/video40_265_moov.flv";

        // var type = "ts";
        // var url = "res/hls/v-000.ts"

        // var type = "flv";
        // var url = "res/video40_265_moov.flv";

        // var type = "hls";
        //var url = "res/m3u82/cg720phevc.m3u8";
        // var url = "res/m3u8/cg.m3u8";
        // var url = "res/hls/veilside.m3u8";
        //var url = "res/hls/veilside_live.m3u8";
        //var url = "res/hls-an/veilside_live.m3u8";
        // var url = "res/hls1/test.m3u8";

        const PLAYER_CORE_TYPE_DEFAULT = 0; // 默认内核 recommand!!!!!!
        const PLAYER_CORE_TYPE_CNATIVE = 1; // 测试内核 FLV请用此内核(FLV VOD use this mode)

        var config = {
            type: type,
            player: "glplayer",
            width: 960,
            height: 540,
            accurateSeek : true,
            token : token,
            extInfo : {
                core : PLAYER_CORE_TYPE_DEFAULT,
                // core : PLAYER_CORE_TYPE_CNATIVE,
                coreProbePart : 0.4,
                moovStartFlag : true,
                readyShow : true,
                ignoreAudio : 0
            }
        };
        makeH265webjs(url, config);

        /*
         * Play raw 265 demo
         */
        /*
        var type = "raw265";
        var url265raw = "res/spreedmovie.hevc";
        var config = {
            type: type,
            player: "glplayer",
            width: 960,
            height: 540,
            accurateSeek : true,
            token : token,
            extInfo : {
                readyShow : true,
                rawFps : 30
            }
        };
        var h265Object = makeH265webjsRaw(url265raw, config);
        */
    </script>
</body>
</html>
